<template>
  <div>
    <el-row class="main" type="flex" justify="center">
      <el-col :span="16">
        <h2 class="text-center">
          <strong>{{ info.name }}</strong>
        </h2>
        <p class="abstract">
          {{ info.description }}
        </p>
        <v-article :articleList="articleList" />
        <div class="block pagination" v-if="total > size">
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            :page-size="size"
            :current-page="currentPage"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import vArticle from "../components/v-article";
import classifyRequest from "../api/classify";
import tagRequest from "../api/tags";
export default {
  name: "classify",
  data() {
    return {
      // 数据列表
      articleList: [],
      // 总页数
      total: 0,
      // 每页显示条数
      size: 3,
      // 当前页数
      currentPage: 1,
      // 详细数据
      info: {},
    };
  },
  components: {
    vArticle,
  },
  created() {
    let params = this.$route.params;
    console.log(this.$route)
    if (this.$route.query.type == "classify") {
      this.getClassifyBlogList(params.name);
    } else if (this.$route.query.type == "tag") {
      this.getTagBlogList(params.name);
    } else {
      this.$message({
        message: "无效分类类型",
        type: "error",
      });
      return false;
    }
  },
  methods: {
    getClassifyBlogList(typeName) {
      classifyRequest.getClassifyData(typeName).then((res) => {
        if (res.data.code != 200) {
          this.$message({
            message: "加载分类页列表数据失败",
            type: "error",
          });
          return false;
        }
        if (res.data.data.list.length > 0) {
          this.articleList = res.data.data.list;
          this.total = res.data.data.list.total;
        }
        this.info = res.data.data.info;
      });
    },
    getTagBlogList(typeName) {
      tagRequest.getArticleListByTagName(typeName).then((res) => {
          console.log(res)
        if (res.data.code != 200) {
          this.$message({
            message: "加载列表数据失败",
            type: "error",
          });
          return false;
        }
        if (res.data.data.list.length > 0) {
          this.articleList = res.data.data.list;
          this.total = res.data.data.list.total;
        }
        this.info = res.data.data.info;
      });
    },
    // 分页切换事件
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getArticleList();
    },
  },
};
</script>